﻿@{
    ViewBag.Title = "Drag and drop";
}

@section head{
    @Styles.Render("~/Content/design.css")
    @Scripts.Render("~/Scripts/kinetic-v4.5.0.min.js")
}

<h2>Index</h2>

<div id="designContainer"></div>
    <script defer="defer">
        var stage = new Kinetic.Stage({
            container: 'designContainer',
            width: 900,
            height: 200
        });
        var layer = new Kinetic.Layer();
        var rectX = stage.getWidth() / 2 - 50;
        var rectY = stage.getHeight() / 2 - 25;

        var box = new Kinetic.Rect({
            x: rectX,
            y: rectY,
            width: 100,
            height: 50,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 4,
            draggable: true
        });

        // add cursor styling
        box.on('mouseover', function () {
            document.body.style.cursor = 'pointer';
        });
        box.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });

        layer.add(box);
        stage.add(layer);
    </script>